<template>
  <el-form :label-width="labelWidth" label-position="left">
    <el-form-item :label="$t('Mode')">
      <el-radio-group size="small" v-model="device.mode" v-on:input="handleChangeMode(device)">
        <el-radio-button :label="0">{{ $t('dictionary.PublicMode') }}</el-radio-button>
        <el-radio-button :label="1">{{ $t('dictionary.UserMode') }}</el-radio-button>
        <el-radio-button :label="2">{{ $t('dictionary.OpenMode') }}</el-radio-button>
        <el-radio-button :label="3">{{ $t('dictionary.MixMode') }}</el-radio-button>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>
<script>
  import BaseManager from './BaseManager'
  import deviceAPI from '@/api/device/device'
  export default {
    name: 'LockerManager',
    mixins: [BaseManager],
    data() {
      return {
        device: {
          mode: null
        }
      }
    },
    methods: {
      setValue(value) {
        this.device = Object.assign({}, value)
      },
      handleChangeMode(device) {
        const vm = this
        const {
          id,
          mode
        } = this.device
        deviceAPI.changeMode({
          id,
          mode
        }).then((res) => {
          vm.$emit('input', device)
        })
      }
    }
  }

</script>
